<template>
  <div class="k-city-select" ref="sel">
    <div class="k-city-select-link" @click="dialog = !dialog">
      <span v-if="!value">请选择</span>
      <template v-else>
        {{ showText }}
      </template>
      <span class="el-icon-caret-bottom"/>
    </div>

    <el-collapse-transition>
      <div v-if="dialog" class="k-city-select-dialog" :style="dialogStyle">
        <div class="k-city-select-dialog-title">
          <span v-for="(item, idx) in selected"
                :key="idx"
                style="margin-right: 10px">
          {{ item ? item.name : '' }}
          </span>
        </div>

        <ul>
          <li v-for="item in showData">
            <a href="javascript:;" @click="onClickSelect(item)">{{ item.name }}</a>
          </li>
        </ul>

        <div>
          <button type="button"
                  class="confirm"
                  :disabled="hasChild"
                  @click="onClickConfirm">确认</button>
          <button type="button"
                  class="back"
                  :disabled="active === 0"
                  @click="onClickBack">返回</button>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: 'KCitySelect',
  props: {
    data: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    value: String
  },
  data () {
    return {
      rect: {},
      dialog: false,
      active: 0,
      selected: [],
      inited: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (this.$refs.sel) {
        this.rect = this.$refs.sel.getBoundingClientRect()
      }
    })
  },
  computed: {
    showText () {
      if (!this.value || this.value === 'undefined') {
        return '请选择'
      }
      let idx
      let provinceId = this.value.substr(0, 2)
      let cityId = this.value.substr(2, 2)
      let shows = []
      idx = this.data.findIndex(item => item.code.substr(0, 2) === provinceId)
      if (idx === -1) {
        return '...'
      }
      shows.push(this.data[idx].name)
      idx = this.data.findIndex(item => item.code.substr(2, 2) === cityId)
      if (idx === -1) {
        return '...'
      }
      shows.push(this.data[idx].name)
      idx = this.data.findIndex(item => item.code === this.value)
      if (idx === -1) {
        return '...'
      }
      shows.push(this.data[idx].name)
      return shows.join(' ')
    },
    dialogStyle () {
      return {
        top: (this.rect.height) + 'px',
      }
    },
    // 省份
    province () {
      return this.data.filter((d) => {
        return d.level === 1
      })
    },
    // 市
    city () {
      if (this.selected.length === 0) {
        return []
      }
      let code = this.selected[0].code
      let data = this.data.filter((d) => {
        return d.upcode === code
      })
      return data
    },
    // 县
    county () {
      if (this.selected.length === 0) {
        return []
      }
      let code
      if (this.selected.length === 1) {
        code = this.selected[0].code
      } else {
        code = this.selected[1].code
      }
      return this.data.filter((d) => {
        return d.upcode === code
      })
    },
    // 当前显示的列表
    showData () {
      let len = this.active
      if (len === 0) {
        return this.province
      } else if (len === 1) {
        return this.city
      }
      return this.county
    },
    // 是否有下级
    hasChild () {
      if (this.selected.length === 0) {
        return true
      }
      let lastId = this.selected[this.selected.length - 1].code
      let tmp = this.data.filter((d) => d.upcode === lastId)
      return tmp.length > 0
    }
  },
  methods: {
    // 选中
    onClickSelect (item) {
      if (this.active === 0) {
        this.selected = [item]
      } else {
        this.selected.splice(this.active, 1, { ...item })
      }

      if (this.active < this.selected.length - 1) {
        this.selected.splice(this.active + 1)
      }

      if (this.hasChild) {
        this.active++
      }
    },
    // 确认
    onClickConfirm () {
      this.dialog = false
      this.$emit('input', this.selected[this.selected.length - 1].code)
    },
    // 返回
    onClickBack () {
      this.active--
    }
  }
};
</script>

<style scoped lang="scss">
  .k-city-select {
    position: relative;
    &-link {
      color: #399EE4;
      cursor: pointer;
      display: inline-block;
    }
    &-dialog {
      position: absolute;
      z-index: 9999;
      background: #fff;
      left: 0;
      width: 480px;
      outline: none;
      border-radius: 4px;
      padding: 10px 20px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
      &-title {
        background: #f5f5f5;
        padding: 0 10px;
        span + span {
          margin: 0 5px;
        }
      }
      ul {
        list-style: none;
        max-height: 200px;
        overflow: auto;
      }
      li {
        display: inline-block;
        padding: 0 10px;
      }
      a {
        text-decoration: none;
        color: #333;
        &:hover {
          color: #3c763d;
        }
      }
    }
  }
  button {
    padding: 6px 10px;
    border: none;
    outline: none;
    cursor: pointer;
  }
  button + button {
    margin-left: 10px;
  }
  button.confirm {
    background: #399EE4;
    color: #fff;
  }
  button.back {
    background: #fff;
    border: solid 1px #f3f2f3;
  }
  button[disabled] {
    opacity: 0.5;
  }
</style>
